import React, { useState } from 'react'
import { View, Text, StyleSheet, ScrollView } from 'react-native'
import * as Animatable from 'react-native-animatable';
import { Button } from '../../components';
import BaseView from '../components/base-view';
import { dp } from "../../utils"
import Shake from './shake';
import Bounce from './Bounce'
import Fade from "./Fade"
import Flip from "./Flip"
import Base from './Base'
const Animation = () => {
  return (
    <ScrollView style={{ backgroundColor: '#f2f2f2', flex: 1, width: '100%', }}>
      <BaseView title='基础抖动'>
        <Shake type="bounce"></Shake>
        <Shake type="flash" color='#5c2223'></Shake>
        <Shake type="jello" color='#eea2a4'></Shake>
        <Shake type="pulse" color='#ee3f4d'></Shake>
        <Shake type="rotate" color='#856d72'></Shake>
        <Shake type="rubberBand" color='#ec9bad'></Shake>
        <Shake type="shake" color='#9b1e64'></Shake>
        <Shake type="swing" color='#63bbd0'></Shake>
        <Shake type="tada" color='#b0d5df'></Shake>
        <Shake type="wobble" color='#5dbe8a'></Shake>
      </BaseView>
      <BaseView title='弹跳出入'>
        <Bounce type="bounceIn"></Bounce>
        <Bounce type="bounceInDown" color='#5dbe8a'></Bounce>
        <Bounce type="bounceInUp" color='#eea2a4'></Bounce>
        <Bounce type="bounceInLeft" color='#ee3f4d'></Bounce>
        <Bounce type="bounceInRight" color='#63bbd0'></Bounce>
        <Bounce type="bounceOut" color="#c6dfc8"></Bounce>
        <Bounce type="bounceOutDown" color='#41ae3c'></Bounce>
        <Bounce type="bounceOutUp" color='#eea2a4'></Bounce>
        <Bounce type="bounceOutLeft" color='#f7da94'></Bounce>
        <Bounce type="bounceOutRight" color='#fa5d19'></Bounce>
      </BaseView>
      <BaseView title='淡入'>
        <Fade type="fadeIn"></Fade>
        <Fade type="fadeInDown" color='#5dbe8a'></Fade>
        <Fade type="fadeInDownBig" color='#eea2a4'></Fade>
        <Fade type="fadeInUp" color='#ee3f4d'></Fade>
        <Fade type="fadeInUpBig" color='#63bbd0'></Fade>
        <Fade type="fadeInLeft" color="#c6dfc8"></Fade>
        <Fade type="fadeInLeftBig" color='#41ae3c'></Fade>
        <Fade type="fadeInRight" color='#ec4e8a'></Fade>
        <Fade type="fadeInRightBig" color='#f7da94'></Fade>
      </BaseView>
      <BaseView title='淡出'>
        <Fade type="fadeOut"></Fade>
        <Fade type="fadeOutDown" color='#5dbe8a'></Fade>
        <Fade type="fadeOutDownBig" color='#eea2a4'></Fade>
        <Fade type="fadeOutUp" color='#ee3f4d'></Fade>
        <Fade type="fadeOutUpBig" color='#63bbd0'></Fade>
        <Fade type="fadeOutLeft" color="#c6dfc8"></Fade>
        <Fade type="fadeOutLeftBig" color='#41ae3c'></Fade>
        <Fade type="fadeOutRight" color='#ec4e8a'></Fade>
        <Fade type="fadeOutRightBig" color='#f7da94'></Fade>
      </BaseView>
      <BaseView title='翻转变化'>
        <Flip type="flipInX" color='#5dbe8a'></Flip>
        <Flip type="flipInY" color='#eea2a4'></Flip>
        <Flip type="flipOutX" color='#ee3f4d'></Flip>
        <Flip type="flipOutY" color='#63bbd0'></Flip>
      </BaseView>
      <BaseView title='快速进出'>
        <Fade type="lightSpeedIn" color='#5dbe8a'></Fade>
        <Fade type="lightSpeedOut" color='#eea2a4'></Fade>
      </BaseView>
      <BaseView title='滑动进出'>
        <Base type="slideInDown" color='#5dbe8a'></Base>
        <Base type="slideInUp" color='#eea2a4'></Base>
        <Base type="slideInLeft" color='#f7da94'></Base>
        <Base type="slideInRight" color='#63bbd0'></Base>

        <Base type="slideOutDown" color='#382129'></Base>
        <Base type="slideOutUp" color='#2177b8'></Base>
        <Base type="slideOutLeft" color='#f7da94'></Base>
        <Base type="slideOutRight" color='#1ba784'></Base>
      </BaseView>
      <BaseView title='缩放'>
        <Base type="zoomIn" color='#fcc307'></Base>
        <Base type="zoomInDown" color='#5dbe8a'></Base>
        <Base type="zoomInUp" color='#eea2a4'></Base>
        <Base type="zoomInLeft" color='#f7da94'></Base>
        <Base type="zoomInRight" color='#63bbd0'></Base>

        <Base type="zoomOut" color='#fcc307'></Base>
        <Base type="zoomOutDown" color='#382129'></Base>
        <Base type="zoomOutUp" color='#2177b8'></Base>
        <Base type="zoomOutLeft" color='#f7da94'></Base>
        <Base type="zoomOutRight" color='#1ba784'></Base>
      </BaseView>

      <BaseView title='动画时间'>
        <Base type="zoomIn" duration={1000} content="默认1000" color='#fcc307'></Base>
        <Base type="zoomIn" duration={2000} content="2000" color='#5dbe8a'></Base>
        <Base type="zoomIn" duration={4000} content="4000" color='#eea2a4'></Base>
        <Base type="zoomIn" duration={6000} content="6000" color='#f7da94'></Base>
        <Base type="zoomIn" duration={10000} content="10000(10秒)" color='#63bbd0'></Base>
      </BaseView>
      <BaseView title='延迟执行'>
        <Text>好像不是这么用的。后续再做调整</Text>
        <Base type="slideInLeft" content="默认0" color='#f26b1f'></Base>
        <Base type="zoomIn" delay={2000} content="2000" color='#673424'></Base>
        <Base type="slideInLeft" delay="4000" content="4000" color='#867018'></Base>
        <Base type="slideInLeft" delay="6000" content="6000" color='#f7da94'></Base>
      </BaseView>
      <BaseView title='easing'>
        <Base type="slideInLeft" duration="2000" easing="ease" content="默认0" color='#f26b1f'></Base>
        <Base type="slideInLeft" duration="2000" easing="linear" content="默认0" color='#f26b1f'></Base>
        <Base type="slideInLeft" duration="2000" easing="ease-in" content="默认0" color='#f26b1f'></Base>
      </BaseView>
    </ScrollView>
  )
}
const styles = StyleSheet.create({
  w336: {
    width: dp(336)
  },
  mb: {
    marginBottom: 20,
  },
})
export default Animation